<template>
  <div id="app">
    <div class="code-title">{{ title }}</div>
    <div class="code-wrap">
      <code v-html="code" style="white-space: pre-wrap;"></code>
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import Prism from "prismjs";
console.log(HelloWorld);
export default {
  name: "App",
  data() {
    return {
      sourceCode: HelloWorld.__sourceCode,
      title: HelloWorld.__sourceTitle,
      code: Prism.highlight(
        HelloWorld.__sourceCode,
        Prism.languages.html,
        "html"
      ),
    };
  },
};
</script>

<style scoped>
.code-wrap {
  background: #eee;
  width: 80%;
  height: 400px;
  overflow: auto;
}
</style>
